<template>
  <div class="d-flex flex-wrap gap-2">
    <!-- #region template -->
    <BDropdown
      text="Primary"
      variant="primary"
      class="me-2"
    >
      <BDropdownItem>Action</BDropdownItem>
      <BDropdownItem>Another action</BDropdownItem>
      <BDropdownItem>Something else here</BDropdownItem>
    </BDropdown>
    <BDropdown
      text="Success"
      variant="success"
      class="me-2"
    >
      <BDropdownItem>Action</BDropdownItem>
      <BDropdownItem>Another action</BDropdownItem>
      <BDropdownItem>Something else here</BDropdownItem>
    </BDropdown>
    <BDropdown
      text="Outline Danger"
      variant="outline-danger"
      class="me-2"
    >
      <BDropdownItem>Action</BDropdownItem>
      <BDropdownItem>Another action</BDropdownItem>
      <BDropdownItem>Something else here</BDropdownItem>
    </BDropdown>
    <!-- #endregion template -->
  </div>
</template>
